<template>
  <div>
    <div class="header"></div>
    <div class="content">
      <div class="logo">
        <img
          slot="header"
          src="http://img0.bdstatic.com/static/searchresult/img/logo-2X_32a8193.png"
        />
      </div>
      <XInput icon-type="success" placeholder="请输入账号">
        <i slot="label" class="fa fa-user"></i>
      </XInput>
      <XInput icon-type="success" placeholder="请输入密码" type="password">
        <i slot="label" class="fa fa-lock"></i>
      </XInput>
      <XButton text="登录"></XButton>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/user";
import { XInput, Card, XButton } from "vux";

export default {
  name: "Login",
  components: {
    XInput,
    XButton
  },
  data() {
    return {
      be2333: function(value) {
        return {
          valid: value === "2333",
          msg: "Must be 2333"
        };
      }
    };
  },
  mounted() {
    login({ userName: "user", password: "pwd" })
      .then(result => {
        console.log(result);
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    clean() {}
  }
};
</script>


<style lang="less">
@import "../base.less";
.header {
  background: #fbb03b;
  .border-radius(1);
  .height(2);
  .width(2);
  .margin-left(-0.5);
  .margin-top(-1.3);
}

.content {
  margin: 0 auto;
  .top(0.3);
  .margin-left(0.1);
  .padding-left(0.04);
  .padding-right(0.04);
  .width(0.8);
  .height(0.96);
  .border-radius(20/750);
  position: absolute;
  box-sizing: border-box;
  background: white;
  border: 1px solid rgba(251, 176, 59, 0.3);
  box-shadow: 0px 0px 20px 1px rgba(251, 176, 59, 0.5);

  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    .height(260/750);
    img {
      .height(80/750);
    }
  }

  // 去除输入框默认上划线
  .weui-cell:before {
    border-top: none;
  }
  .vux-x-input {
    .margin-top(0.03);
    .border-radius(10/750);
    color: rgb(131,131,131);
    background: rgb(235, 235, 235);
  }

  button {
    .margin-top(0.1);
    background: #fbb03b;
    color: rgb(163, 115, 39);
    border: none!important;
  }
}

.fa {
  padding-right: 10px;
}
</style>

